<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>用户管理</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <script src="../../js/commonJs.js"></script>
    <script src="../../js/commonCss.js"></script>
    <style>
        .mt10 {
            margin-top: 10px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="jeefastapp" v-cloak>
    <div style="height: 50px">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>后台用户</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div v-show="showList">
        <el-form :inline="true" :model="q" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="q.username" size="mini" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="q.mobile" size="mini" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="q.roleId" size="mini" clearable placeholder="请选择角色" @change="changeType">
                    <el-option v-for="role in roleList"
                               :key="role.roleId"
                               :label="role.roleName"
                               :value="role.roleId.toString()">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="query" icon="el-icon-search">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="cantainer">
            <el-button-group>
                <el-button type="primary" size="mini" icon="el-icon-plus" v-if="hasPermission('sys:user:save')"
                           @click="add">新增
                </el-button>
                <!--				<el-button type="danger" size="mini" icon="el-icon-edit" v-if="hasPermission('sys:user:delete')"-->
                <!--						   @click="dels">批量删除-->
                <!--				</el-button>-->
                <el-button type="success" size="mini" icon="el-icon-download"
                           @click="downLoadExcel">批量导出
                </el-button>
            </el-button-group>
            <el-table size="mini" ref="multipleTable" :data="entityList"
                      @selection-change="changeFun" size="mini">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="username" label="用户名" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="mobile" label="账号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="roleNames" label="角色" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="createTime" label="添加时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="400px">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                @click="update(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button size="mini"
                                   type="text"
                                   v-if="scope.row.status==NULL || scope.row.status==1"
                                   @click="updateStatus(scope.row.userId,1)">停用
                        </el-button>
                        <el-button size="mini"
                                   type="text"
                                   v-if="scope.row.status==0"
                                   @click="updateStatus(scope.row.userId,2)">恢复
                        </el-button>
                        <!--						<el-button-->
                        <!--								size="mini"-->
                        <!--								type="text"-->
                        <!--								@click="delBy(scope.$index, scope.row)">删除-->
                        <!--						</el-button>-->
                        <!--						<el-button-->
                        <!--								size="mini"-->
                        <!--								type="text"-->
                        <!--								@click="updatePassword(scope.row)">初始化密码-->
                        <!--						</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>

    <div v-show="!showList" class="panel panel-default" style="margin-top: 20px;width: 98%;">
        <div class="panel-heading">
            <a class="el-icon-arrow-left" size="mini" style="text-decoration: none;cursor:pointer;"
               type="primary"
               @click="reload">返回后台人员管理
            </a>&nbsp;
            <el-tag>{{title}}</el-tag>
        </div>
        <el-form size="mini" :model="user" style="margin-top: 20px" :rules="rules" ref="user" label-width="110px"
                 class="demo-ruleForm">
            <el-form-item label="用户名" prop="username" style="width: 50%;">
                <el-input v-model="user.username" minlength="6" maxlength="18" autocomplete="off"></el-input>
            </el-form-item>
            <!--			<el-form-item label="真实姓名" prop="realname" style="width: 50%;">-->
            <!--				<el-input v-model="user.realname" maxlength="10" autocomplete="off"></el-input>-->
            <!--			</el-form-item>-->
            <el-form-item label="角色" prop="roleId" style="width: 50%;">
                <el-select v-model="user.roleId" placeholder="请选择角色" clearable style="width: 100%;"
                           @change="$forceUpdate()">
                    <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                               :value="item.roleId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="省行" style="width: 50%;">
                <el-select v-model="user.province" placeholder="请选择省行" clearable style="width: 100%;" @change="getCity">
                    <el-option v-for="item in provinceList" :key="item.bankId" :label="item.bankName"
                               :value="item.bankId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="市行" style="width: 50%;">
                <el-select v-model="user.city" placeholder="请选择省行" clearable style="width: 100%;">
                    <el-option v-for="item in cityList" :key="item.bankId" :label="item.bankName"
                               :value="item.bankId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="账号" prop="mobile" style="width: 50%;">
                <el-input v-model="user.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" style="width: 50%;">
                <el-input v-model="user.password" type="password" autocomplete="off"></el-input>
                <p style="color: #ac2925" v-if="user.userId != null">如不修改密码，请不要输入</p>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveOrUpdate('user')">{{ title }}</el-button>
                <el-button @click="reload">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<script src="../../js/modules/sys/user.js"></script>
</body>
</html>